<template>
   <div id="RightFun">
       
         <div id="PersonalCardBox" class="flex" v-if="User" >
             <div class="FlowEffect flex"></div>
             <PersonalCard id="PersonalCard" class="flex" />
         </div>

    
        <MusicHot class="box"/>
   </div>
</template>
<script>
import PersonalCard from '@/view/Home/RightFun/PersonalCard/PersonalCard.vue'
import {mapMutations,mapState} from 'vuex'
import MusicHot from './MusicHot/MusicHot.vue'

  export default 
  {
     components: { PersonalCard, MusicHot },
     name :'', 
     computed:{
       ...mapState('Login',['User']),
     },
     methods:{
        ...mapMutations('Tool',['PUBLISHON'])
     }
  }
</script>
<style scoped lang='less'>
// 统一盒子风格
.box{
    width: 100%;
     opacity: 1;
}


#PersonalCardBox{
    width: 100%;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;

    position: relative;
    margin-bottom: 10px;

    #PersonalCard{
      width: calc( 100% - 10px );
      height: calc( 100% - 10px );
      background: black; 
      position: absolute;
      z-index: 1;
          border-radius: 10px;
      overflow: hidden;
   }
}



</style>